<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>抽外星人电脑</button>
    <script>
        /**
         *  40% 概率中奖
         * 
         *  1-100  1 2 3 4   <=40
         * 
         *  耗时的操作===> 回调函数执行
         * 
         *  等待....
         *  成功
         *  失败
         * 
         */
        let oBtn = document.querySelector('button');
        // oBtn.onclick = function () {
        //     setTimeout(() => {
        //         let num = Math.floor(Math.random() * 100 + 1);
        //         if (num <= 40) {
        //             alert('恭喜你中奖了 50元代金券： 中奖号码是： ' + num);
        //         } else {
        //             alert('谢谢参与，您的号码是: ' + num);
        //         }
        //     }, 2000);
        // }

        // Promise修改
        /**
         *  Promise 是js提供的一个内置的构造函数
         * 
         *  Promise的状态改变，通过 resolve 和 reject函数改变
         * 
         *  p : 是promise实例出来的实例对象
         *      PromiseState:  状态
         *          1. 等待： pending
         *          2. 成功： fulfilled
         *          3. 失败:  rejected
         *      PromiseResult: 结果
         *          1. 等待： undefined
         *          2. 成功:  成功的结果值，是resolve函数调用时传的实参
         *          2. 失败： 失败的结果值，是reject函数调用时传的实参
         */

        oBtn.onclick = function () {

            let p = new Promise((resolve, reject) => {
                // setTimeout(() => {
                //     let num = Math.floor(Math.random() * 100 + 1);
                //     if (num <= 40) {
                //         resolve(num);
                //     } else {
                //         reject(num);
                //     }
                // }, 2000);
                // resolve('ok123');
                //console.log('resolve: ', resolve); // resolve函数的执行会将p的状态从 等待到成功 pending->
                // console.log('reject: ', reject);
                // reject('err');

                // resolve('ok');

                reject('error');

            })
            console.log('p: ', p);

            // 每一个promise对象，都可以调用then方法
            /**
             *  promise对象.then(成功的回调, 失败的回调);
             * 
             *  当promise对象是成功的promise[fulfilled]的时候,会执行then方法成功的回调，并将成功的结果值，作为参数传递给成功的回调函数的形参
             * 
             *  当Promise对象是失败的promise[rejected]的时候，会执行then方法中失败的回调，并将失败的结果值作为参数，传递给回调函数的形参
             * 
             */
            p.then(data=>{
                alert('恭喜你中奖了 50元代金券： 中奖号码是： ' + data);
            },err=>{
                alert('谢谢参与: 您的号码是'+ err);
            })
        }
    </script>
</body>

</html>